<template>
	<view class="page_main page_render" :class="{ can_show: page_render }">
		<pagelogin ref="pagelogin" @loginready="pagerefresh" @initcallback="com_pagelogin_initcallback($event)" need_login="0">
			<!-- hasHeight :navstyle="{ background: '#1F1F1F' }" -->
			<diynav ref="diynav" :navstyle="{ background: '#383950' }" isFixed isdiy hasHeight @settop="set_pagetop($event)">
				<template slot="diy">
					<view class="index_message">
						<view class="left_view">
							<view class="index_view" @click="bluetooth_connect_menu(1)">
								<image
									class="view_icon"
									:src="BLUETOOTH_DEVICE_CONFIG.bluetooth_connect ? '/static/images/index_bluetool.png' : '/static/images/index_bluetool_no.png'"
								></image>
								<text class="tt">
									{{ BLUETOOTH_DEVICE_CONFIG.bluetooth_connect ? '已连接' : '未连接' }}
								</text>
							</view>
							<view class="index_view" @click="bluetooth_connect_menu(0)">
								<image class="view_icon" src="/static/images/index_scan.png"></image>
							</view>
						</view>

						<view class="title">
							{{ page_title }}
						</view>

						<view class="right_view"></view>
					</view>
				</template>
			</diynav>

			<view class="page_content">
				<judgeTips @trigger_connect_judge="bluetooth_connect_menu()"></judgeTips>

				<myToolList pagetype="setting" :showForm="show_view" @formClick="myToolsClick($event)"></myToolList>
			</view>

			<bluetoothPopup ref="bluetoothPopup" @connect_callback="connect_callback()"></bluetoothPopup>
		</pagelogin>
	</view>
</template>
<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	data() {
		return {
			change_var: {},

			scrollTop: 0,
			render_component_init: false,
			page_render: false,
			page_title: '设置',
			render_req: false,
			nextreq: true,
			page_id: 0,
			page_form: {},
			page_list: [],
			loadingstatus: 0,

			page_view: [
				{
					view_tt: '基本信息',
					form_key: 'information',
					can_click: true,
				},
				{
					view_tt: '初始设置',
					form_key: 'initialize',
					can_click: true,
				},
				{
					view_tt: '保护参数',
					form_key: 'protection_parameters',
					can_click: true,
				},
				{
					view_tt: '保护次数',
					form_key: 'protection_count',
					can_click: true,
				},
				{
					view_tt: '电流设置',
					form_key: 'current_setting',
					can_click: true,
				},
				{
					view_tt: '温度设置',
					form_key: 'temperature_setting',
					can_click: true,
				},
				{
					view_tt: '均衡设置',
					form_key: 'balanced_setting',
					can_click: true,
				},
				{
					view_tt: '容量电压设置',
					form_key: 'capacity_voltage_setting',
					can_click: true,
				},
				{
					view_tt: '链接内阻',
					form_key: 'link_resistance',
					can_click: true,
				},
				{
					view_tt: '功能设置',
					form_key: 'function_setting',
					can_click: true,
				},
				{
					view_tt: '系统设置',
					form_key: 'system_setting',
					can_click: true,
				},
			],
			show_view: [],
		};
	},
	created() {},
	onLoad() {
		this.init_pagedata();
	},
	onShow() {
		this.com_onshow_fun();
	},
	onHide() {
		this.com_page_hide(this);
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onPullDownRefresh() {
		this.pagerefresh(1);
	},
	onShareAppMessage(res) {},
	onShareTimeline(res) {},
	methods: {
		//页面刷新
		pagerefresh(type = 0) {
			let _this = this;
			_this.startPulldownJudge(type);
			_this.com_page_show(_this);
			_this.page_bluetooth_init();
			_this.show_view_judge();
		},
		show_view_judge() {
			let _this = this;
			_this.show_view = _this.page_view.reduce((p, n) => {
				if (_this.roleJudge(n)) {
					p.push(n);
				}
				return p;
			}, []);
		},
		page_bluetooth_init() {
			let _this = this;
			_this.bluetooth_init_judge({ click_trigger: false }, () => {
				let { bluetooth_connect, bluetooth_deviceId } = _this.BLUETOOTH_DEVICE_CONFIG;
				// 把已连接的设备添加到设备列表中
				if (bluetooth_connect) {
					// _this.com_loading_fun();
				} else if (bluetooth_deviceId) {
					_this.judge_has_connect({ task: false });
				}
			});
		},
		// 连接成功回调
		connect_callback() {
			let _this = this;
			_this.com_loading_fun({ mode: 0 });
			setTimeout(() => {
				_this.goweburl_f('/pages/index/index');
			}, 300);
		},
	},

	watch: {},
};
</script>

<style lang="scss">
.battery_control {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.battery_control_view {
		width: calc((100% - 20rpx) / 2);
		height: 186rpx;
		background-color: #3f425a;
		border-radius: 10rpx;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.view_bot {
			margin-top: 26rpx;
			display: flex;
			align-items: center;

			.tt {
				font-size: 28rpx;
				font-weight: 400;
				color: #ffffff;
			}

			.icon {
				margin-left: 10rpx;
				width: 26rpx;
				height: 26rpx;
			}
		}
	}
}

.mode_select {
	// display: flex;
	// align-items: center;
	// justify-content: space-between;

	gap: 20rpx;

	.mode_select_view {
		--theme: #3f425a;
		--tt: #ffffff;
		position: relative;
		height: 166rpx;
		background-color: #3f425a;
		border-radius: 10rpx;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		transition: all 0.3s;
		border: 2rpx solid var(--theme);

		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 0;
			border: 20rpx solid transparent;

			border-top: 20rpx solid var(--theme);
			border-right: 20rpx solid var(--theme);
			transition: all 0.3s;
		}

		&.on {
			--theme: var(--color1);
			--tt: var(--color1);
		}

		&:nth-child(n + 4) {
			// margin-top: 20rpx;
		}

		.select_icon {
			position: absolute;
			right: 4rpx;
			top: 4rpx;
			width: 16rpx;
			height: 16rpx;
			z-index: 5;
		}

		.img_box {
			width: 62rpx;
			height: 62rpx;
		}

		.tt {
			margin-top: 6rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: var(--tt);
			transition: all 0.3s;
		}
	}
}

.battery_setting {
	display: flex;
	flex-wrap: wrap;
	// align-items: center;
	// justify-content: space-between;
	padding: 36rpx 0 40rpx;

	.battery_setting_view {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;

		&:nth-child(n + 5) {
			margin-top: 32rpx;
		}

		.img_box {
			width: 78rpx;
			height: 78rpx;
		}

		.tt {
			margin-top: 12rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
</style>
